<template>
  <ElCard style="height: calc(100% - 2px)" :body-style="{ height: '100%' }">
    <ElContainer style="height: 100%">
      <ElAside width="220px">
        <br />
        <UserCard v-model:user-data="qrCodeInfo"  type="gun"/>
        <br />
        <ElCard :body-style="{ textAlign: 'center' }">
          <ElButton @click="handleSave" type="primary">
            <ElIcon>
              <Edit />
            </ElIcon>
            保存
          </ElButton>
          <ElButton type="warning" @click="handleClear">
            <ElIcon>
              <Refresh />
            </ElIcon>
            清空
          </ElButton>
          <br />
          <br />
          <el-button
            type="warning"
            @click="asyncHandle"
            loading-icon="Eleme"
            :loading="asyncLoading"
            >同步
          </el-button>
          <LocalHistoryList
            :table="db.healthCheck"
            @edit-click="handleHistoryRowEdit"
          />
        </ElCard>
      </ElAside>
      <ElMain>
        <HealthArchives
          ref="healthArchiveRef"
          :health-archive="healthArchive"
          :user-name="qrCodeInfo.username"
        />
      </ElMain>
    </ElContainer>
  </ElCard>
</template>

<script lang="ts" setup>
import LocalHistoryList from "@/components/LocalHistoryList/index.vue";
import { createQRCodeInfo, IQRCodeInfo } from "@/model/IQRCodeInfo";
import HealthArchives from "@/views/Archive/HealthArchives/index.vue";
import { ref, toRaw } from "vue";
import { ElMessage, ElNotification } from "element-plus";
import dayjs from "dayjs";
import {asyncLocalRequest, db, DbService} from "@/db/db";
import { IHealthArchiveCloud } from "@/model";
import { cloneDeep } from "lodash-es";
import { asyncHealthCheck } from "@/api/asyncApi";
import { useTerminalAsync } from "@/hooks/useTerminalAsync";

const qrCodeInfo = ref<Partial<IQRCodeInfo>>(createQRCodeInfo());
const handleScanSuccess = (val) => {
  qrCodeInfo.value = val;
};
const healthArchiveRef = ref<InstanceType<typeof HealthArchives>>();
const handleClear = () => {
  //置空
  qrCodeInfo.value = createQRCodeInfo();
  healthArchive.value = {};
  setTimeout(() => {
    healthArchiveRef.value?.setArchive();
  }, 2);
};

const dbService = new DbService(db.healthCheck)
const handleSave = async () => {
  const data = await healthArchiveRef.value?.getData();
  if (!qrCodeInfo.value?.idno) {
    ElNotification({
      title: "保存错误",
      message: "无人员信息，不能保存",
      type: "error",
    });
    return;
  }
  let saveData: any = data;
  Object.assign(saveData, toRaw(qrCodeInfo.value));
  // saveData.b04_053_03 =
  //   saveData.b04_053_03 || dayjs().format("YYYY-MM-DD HH:mm:ss");
  // saveData.measureTime = dayjs().valueOf();
  // saveData.synchronous = 0;
  saveData.article = "体检问询";
  //关联健康档案号
  saveData.id_no = qrCodeInfo.value.idno
  saveData.cardId = qrCodeInfo.value.idno;
  // saveData.qr_code_id = qrCodeInfo.value.id;
  // saveData.sex = qrCodeInfo.value.sex;
  // saveData.userName = qrCodeInfo.value.username;
  console.log(saveData.id);
  if (!saveData.id) {
    delete saveData.id;
  }
  const result:any = dbService.saveCard(saveData,qrCodeInfo.value);
  ElMessage.success(result.message)
    //置空
    handleClear();
};
// 历史数据
const healthArchive = ref({});
const handleHistoryRowEdit = (row: IHealthArchiveCloud) => {
  qrCodeInfo.value = {
    idno: row.cardId,
    id: row.qr_code_id,
    username: row.userName,
    sex: row.sex,
  };
  healthArchive.value = cloneDeep(row);
  setTimeout(() => {
    healthArchiveRef.value?.setArchive();
  }, 2);
};

const { asyncHandle, asyncLoading } = useTerminalAsync(
  db.healthCheck,
  asyncHealthCheck
);
</script>
<style scoped lang="scss"></style>
